<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" @click="handleAdd">新增分类</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Download" @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-row>
      <el-table v-loading="loading" :data="list">
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column label="分类名称" align="center" prop="name" />
        <el-table-column label="状态" align="center" prop="hidden">
          <template #default="scope">
            <dict-tag :options="content_hidden" :value="scope.row.hidden" />
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
          width="170"
        >
          <template #default="scope">
            <span>{{ parseTime(scope.row.gmtCreate) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <a
              href="javascript:;"
              style="color: #358de5; text-decoration: none; margin-right: 10px"
              @click="handleEdit(scope.row, 2)"
              >编辑</a
            >
            <a
              v-if="scope.row.hidden == 0"
              href="javascript:;"
              style="color: #358de5; text-decoration: none; margin-right: 10px"
              @click="handleShow(scope.row)"
              >显示</a
            >
            <a
              v-if="scope.row.hidden == 1"
              href="javascript:;"
              style="color: #fcb80b; text-decoration: none; margin-right: 10px"
              @click="handleHide(scope.row)"
              >隐藏</a
            >
            <a
              href="javascript:;"
              style="color: #fcb80b; text-decoration: none; margin-right: 10px"
              @click="handleDelete(scope.row)"
              >删除</a
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-row>

    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" v-model="open" width="400px" append-to-body>
      <el-form
        @submit.native.prevent
        :model="form"
        :rules="rules"
        ref="userRef"
        label-width="100px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="分类名称" prop="name">
              <el-input
                v-model="form.name"
                placeholder="请输入"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="状态">
              <el-radio-group v-model="form.hidden">
                <el-radio
                  v-for="dict in content_hidden"
                  :key="dict.value"
                  :label="Number(dict.value)"
                  >{{ dict.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer v-if="title !== '详情'">
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">保 存</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="category">
import {
  queryCategoryPage,
  addCategory,
  editCategory,
  deleteCategory,
  categoryExport,
  hideCategory,
  showCategory,
} from "@/api/category";
const { proxy } = getCurrentInstance();
const { content_hidden } = proxy.useDict("content_hidden");
const list = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const title = ref("");
const data = reactive({
  form: {
    id: undefined,
    name: "",
    hidden: 0,
  },
  queryParams: {
    pageNum: 1,
    pageSize: 1000,
  },
  rules: {
    name: [
      { required: true, message: "分类名称不能为空", trigger: "blur" },
      {
        min: 1,
        max: 20,
        message: "用户名称长度必须介于 1 和 20 之间",
        trigger: "blur",
      },
    ],
    hidden: [{ required: true, message: "状态不能为空", trigger: "change" }],
  },
});

const { queryParams, form, rules } = toRefs(data);

/** 查询用户列表 */
const getList = () => {
  loading.value = true;
  queryCategoryPage(queryParams.value).then((res) => {
    loading.value = false;
    list.value = res.rows;
    total.value = Number(res.total);
  });
};
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  proxy.resetForm("queryRef");
  queryParams.value = {
    pageNum: 1,
    pageSize: 1000,
  };
  handleQuery();
};

/** 导出按钮操作 */
const handleExport = async () => {
  proxy.$modal.loading("文件导出中，请稍候...");
  let result = await categoryExport();
  const blob = new Blob([result]);
  let link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "文章列表_" + new Date().getTime() + ".xlsx";
  link.click();
  proxy.$modal.closeLoading();
};

/** 重置操作表单 */
const reset = () => {
  form.value = {
    id: undefined,
    name: "",
    hidden: 0,
  };
  proxy.resetForm("userRef");
};

const handleAdd = () => {
  title.value = "新增";
  reset();
  open.value = true;
};

/** 取消按钮 */
const cancel = () => {
  open.value = false;
  changeScore.value = false;
  reset();
};

/** 删除按钮操作 */
const handleDelete = (row) => {
  proxy.$modal
    .confirm("是否确认要删除" + row.name + "分类吗")
    .then(() => {
      return deleteCategory(row.id);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
};

/** 隐藏按钮操作 */
const handleHide = (row) => {
  proxy.$modal
    .confirm("是否隐藏" + row.name + "该分类")
    .then(() => {
      return hideCategory(row.id);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("隐藏成功");
    })
    .catch(() => {});
};

/** 显示按钮操作 */
const handleShow = (row) => {
  proxy.$modal
    .confirm("是否显示" + row.name + "该分类")
    .then(() => {
      return showCategory(row.id);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("显示成功");
    })
    .catch(() => {});
};

/** 修改按钮操作 */
const handleEdit = (row, type) => {
  reset();
  title.value = type == 1 ? "详情" : "编辑";
  form.value = {
    ...row,
  };
  open.value = true;
};

/** 提交按钮 */
const submitForm = () => {
  proxy.$refs["userRef"].validate((valid) => {
    if (valid) {
      if (form.value.id!==undefined) {
        editCategory(form.value).then((response) => {
          proxy.$modal.msgSuccess("编辑成功");
          open.value = false;
          getList();
        });
      } else {
        addCategory(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
};

getList();
</script>
      <style lang='scss' scoped>
</style>
      